
<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en" class="no-js" ><!--<![endif]-->

    <head>
    
        <!-- BEGIN: basic page needs -->
        <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
        <meta name="viewport" content="width=100%; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no;" />
        <title>REDDESIGN - Site Template</title>
        <!-- END: basic page needs -->
        
        <!-- BEGIN: css -->
        <link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
        <link href="css/bootstrap-responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/style.css" rel="stylesheet" type="text/css" />
        <link href="css/responsive.css" rel="stylesheet" type="text/css" />
        <link href="css/skin-default.css" rel="stylesheet" type="text/css" />
        <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
        <!-- END: css -->
            
        <!-- BEGIN: js -->
    	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
        <script type="text/javascript" src="js/google-code-prettify/prettify.js"></script>
        <script type="text/javascript" src="js/modernizr.js"></script> 
        <script type="text/javascript" src="js/respond.js"></script> 
        <script type="text/javascript" src="js/superfish.js"></script>
        <script type="text/javascript" src="js/hoverIntent.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script type="text/javascript" src="js/jquery.prettyPhoto.js"></script> 
        <script type="text/javascript" src="js/jquery.hoverdir.js"></script>
        <script type="text/javascript" src="js/jquery.flexslider.js"></script>
        <script type="text/javascript" src="js/jquery.elastislide.js"></script>
        <script type="text/javascript" src="js/jquery.tweet.js"></script>
        <script type="text/javascript" src="js/bootstrap.js"></script> 
        <script type="text/javascript" src="js/main.js"></script>
        <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
		<![endif]-->
        <!-- END: js -->
        
    </head>
    
<body>

<!-- .container -->
<section class="container">

    <!-- #header .row -->
    <header id="header">
        <div class="row">

            <!-- .span3.logo -->
            <div class="span3 logo">
                <a href="./index.html" ><img src="images/logo.png" alt="Logo" /></a>
            </div><!-- /.span3.logo -->
            
            <!-- .span9 -->
            <nav class="span9">

                <!-- #menu -->
                <ul id="menu">
                    <li><a href="./index.html" class="current" data-description="Home Page">Home</a></li>
                    <li><a href="./about.html" data-description="About Page">About</a>
                        <ul>
                            <li><a href="./team.html">Team</a></li>
                            <li><a href="./services.html">Services</a></li>
                            <li><a href="./testimonials.html">Testimonials</a></li>
                        </ul>
                    </li>
                    <li><a href="./portfolio.html" data-description="Portfolio Page">Portfolio</a>
                        <ul>
                            <li><a href="./portfolio-left.html">Portfolio Left Sidebar</a></li>
                            <li><a href="./portfolio-right.html">Portfolio Right Sidebar</a></li>
                            <li><a href="./portfolio-single-left.html">Portfolio Single Left</a></li>
                            <li><a href="./portfolio-single-right.html">Portfolio Single Right</a></li>
                        </ul>
                    </li>
                    <li><a href="./blog-left.html" data-description="Blog Page">Blog</a>
                        <ul>
                            <li><a href="./blog-right.html">Blog Right Sidebar</a></li>
                            <li><a href="./blog-without.html">Blog Without Sidebar</a></li>
                            <li><a href="./blog-single-left.html">Blog Single Left</a></li>
                            <li><a href="./blog-single-right.html">Blog Single Right</a></li>
                            <li><a href="./blog-single-without.html">Blog Single Without</a></li>
                        </ul>
                    </li>
                    <li><a href="#" data-description="Features Page">Features</a>
                        <ul>
                            <li><a href="./scaffolding.html">Scaffolding</a></li>
                            <li><a href="./base-css.html">Base CSS</a></li>
                            <li><a href="./components.html">Components</a></li>
                            <li><a href="./jquery-plugins .html">jQuery plugins</a></li>
                        </ul>
                    </li>
                    <li><a href="./contact.html" data-description="Contact Page">Contact</a></li>
                    <li><a href="http://themeforest.net/item/reddesign-html-responsive-portfolio-template/2784878?ref=bingumd" data-description="Purchase">Purchase</a></li>
                </ul><!-- /#menu -->

            </nav><!-- .span9-->
        
        </div>
    </header><!-- /#header .row -->
	
    <div class="copyrights">Collect from <a href="http://www.cssmoban.com/"  title="网页模板">网页模板</a></div>

    <!-- #welcome -->
    <section id="welcome">

        <!-- .span5 -->
        <div class="span5">
            <h1>Welcome to the <span class="color">RedDesign</span> template demo</h1>
        </div><!-- /.span5 -->

        <!-- .span6 -->
        <div class="span6">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas uctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea. Lorem ipsum dolor sit amet, consecteturadipiscing elit.</p>
        </div><!-- /.span6 -->

    </section><!-- /#welcome -->


    <!-- #home_slider -->
    <section id="home_slider">

        <!-- .slides -->
        <ul class="slides">
            <li>
                <img src="example/slider1.jpg" alt="Slider" />

                <div class="num">
                    <span>01</span>
                    <a href="#" data-rel="tooltip" title="Go to..."></a>
                </div>

                <div class="text">
                    <div class="left">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique
                        consectetur elit.</p>
                    </div>
                    <div class="right">
                        <h2>Lorem ipsum dolor sit amet consectetur adipiscing elit.</h2>
                    </div>
                </div>
            </li>

            <li>
                <img src="example/slider2.jpg" alt="Slider" />

                <div class="num">
                    <span>02</span>
                    <a href="#" data-rel="tooltip" title="Go to..."></a>
                </div>

                <div class="text">
                    <div class="left">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus.</p>
                    </div>
                    <div class="right">
                        <h2>Lorem ipsum dolor sit amet consectetur.</h2>
                    </div>
                </div>
            </li>

            <li>
                <img src="example/slider3.jpg" alt="Slider" />

                <div class="num">
                    <span>03</span>
                    <a href="#" data-rel="tooltip" title="Go to..."></a>
                </div>

                <div class="text">
                    <div class="left">
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique.</p>
                    </div>
                    <div class="right">
                        <h2>Lorem ipsum dolor sit amet consectetur adipiscing.</h2>
                    </div>
                </div>
            </li>
        </ul><!-- /.slides -->

    </section><!-- /#home_slider -->


    <!-- .row .services -->
    <section class="row services">
        
        <!-- .span3 -->
        <div class="span3">

            <h3 class="title">Our Services</h3>

            <!-- .home_services .clearfix -->
            <ul class="home_services clearfix unstyled">
                <li>
                    <img src="images/icon/services-1.png" alt="Icon">
                    <h4>Web Design</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </li>

                <li>
                    <img src="images/icon/services-2.png" alt="Icon">
                    <h4>Optimization</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </li>

                <li>
                    <img src="images/icon/services-3.png" alt="Icon">
                    <h4>Flash Animation</h4>
                    <p>Lorem ipsum dolor sit amet consectetur adipiscing elit</p>
                </li>
            </ul><!-- /.home_services .clearfix --> 

        </div><!-- /.span3 -->
        
        <!-- .span9 -->
        <div class="span9">

            <h3 class="title">Why Choose Us? <small>Lorem ipsum dolor sit amet</small></h3>
            
            <!-- .row -->
            <div class="row">

                <!-- .span3 -->
                <div class="span3">

                    <!-- #accordion .accordion -->
                    <div id="accordion" class="accordion">

                        <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#acc1" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle acc-active">Lorem ipsum dolor consectetur</a>
                            </div>
                            <div class="accordion-body in collapse" id="acc1">
                                <div class="accordion-inner">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea dictumst.</p>
                                </div>
                            </div>
                        </div>

                         <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#acc2" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Lorem ipsum dolor consectetur</a>
                            </div>
                            <div class="accordion-body collapse" id="acc2">
                                <div class="accordion-inner">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea dictumst.
                                </div>
                            </div>
                        </div>

                         <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#acc3" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Lorem ipsum dolor consectetur</a>
                            </div>
                            <div class="accordion-body collapse" id="acc3">
                                <div class="accordion-inner">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea dictumst.
                                </div>
                            </div>
                        </div>

                         <div class="accordion-group">
                            <div class="accordion-heading">
                                <a href="#acc4" data-parent="#accordion" data-toggle="collapse" class="accordion-toggle">Lorem ipsum dolor consectetur</a>
                            </div>
                            <div class="accordion-body collapse" id="acc4">
                                <div class="accordion-inner">
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea dictumst.
                                </div>
                            </div>
                        </div>

                    </div><!-- /#accordion .accordion -->

                </div><!-- /.span3 -->

                <!-- .span6 -->
                <div class="span6">
                    
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut in lacus rhoncus elit egestas luctus. Nullam at lectus augue. Ut tristique consectetur elit, sed tincidunt elit iaculis in. In hac habitasse platea dictumst. Curabitur condimentum justo sed urna porttitor aliquam.</p>

                    <!-- .row.features -->
                    <div class="row features">

                        <div class="span2">
                            <div class="box">
                                <h4>Clean Design</h4>
                                <img src="images/icon/features-1.png" alt="Features">
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                            </div>
                        </div>
                        
                        <div class="span2">
                            <div class="box">
                                <h4>Very flexible</h4>
                                <img src="images/icon/features-2.png" alt="Features">
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                            </div>
                        </div>
                        
                        <div class="span2">
                            <div class="box">
                                <h4>Unlimited Color</h4>
                                <img src="images/icon/features-3.png" alt="Features">
                                <p>Lorem ipsum dolor sit amet consectetur adipiscing elit.</p>
                            </div>
                        </div>
                        
                    </div><!-- /.row.features -->

                </div><!-- /.span6 -->

            </div><!-- /.row -->

        </div><!-- /.span9 -->

    </section><!-- /.row.services -->


    <!-- BEGIN: .portfolio .da-thumbs .clearfix -->
    <section class="portfolio da-thumbs clearfix">

        <h3 class="title">Our Latest Work <small>Lorem ipsum dolor sit amet</small></h3>

        <article>
            <img src="example/portfolio-h-1.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Graphic Design</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view" title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-2.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Print Design</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-3.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Branding</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-4.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Motion Graphics</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>                
            </div>
        </article>

        <article>
            <img src="example/portfolio-h-5.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Motion Graphics</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-6.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Branding</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-7.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Print Design</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>
        
        <article>
            <img src="example/portfolio-h-8.jpg" alt="Images" />
            <span class="p-text">
                <h2>Lorem ipsum dolor</h2>
                <h4>Graphic Design</h4>
            </span>
            <div>
                <a href="example/view.jpg" data-rel="prettyPhoto" class="portfolio-view"  title="Lorem ipsum dolor"></a>
                <a href="./portfolio-single" class="portfolio-link"></a>    
            </div>
        </article>

    </section><!-- END: /.portfolio .da-thumbs .clearfix -->


    <!-- .row -->
    <section class="row">

        <!-- .span5 -->
        <div class="span5">

            <h3 class="title">Testimonials <small>Lorem ipsum dolor sit amet</small></h3>

            <!-- #testimonials .carousel. testimonials -->
            <div id="testimonials" class="flex-carousel testimonials">
                <div class="carousel-wrapper">

                    <ul> 
                        <li>
                            <div class="t-info clearfix">
                                <img src="example/t3.jpg" alt="Images"/>
                                <h2>Jhon Doe</h2>
                                <p>Copmany Inc. <a href="http://rhemeforest.net">http://themeforest.net</a></p>
                            </div>
                            <div class="t-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis ligula
                                nec nunc tempor rutrum. Class aptent taciti sociosqu ad litora torquent per
                                conubia nostra, per inceptos himenaeos. In lacus mauris, conubia nostra, 
                                per inceptos himenaeos. In lacus mauris,
                                <span></span>
                            </div>
                        </li>

                        <li>
                            <div class="t-info clearfix">
                                <img src="example/t2.jpg" alt="Images"/>
                                <h2>Jhon Doe</h2>
                                <p>Copmany Inc. <a href="http://rhemeforest.net">http://themeforest.net</a></p>
                            </div>
                            <div class="t-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis ligula
                                nec nunc tempor rutrum. Class aptent taciti sociosqu ad litora torquent per
                                conubia nostra, per inceptos himenaeos. In lacus mauris, conubia nostra, 
                                per inceptos himenaeos. In lacus mauris,
                                <span></span>
                            </div>
                        </li>

                        <li>
                            <div class="t-info clearfix">
                                <img src="example/t1.jpg" alt="Images"/>
                                <h2>Jhon Doe</h2>
                                <p>Copmany Inc. <a href="http://rhemeforest.net">http://themeforest.net</a></p>
                            </div>
                            <div class="t-text">
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce iaculis ligula
                                nec nunc tempor rutrum. Class aptent taciti sociosqu ad litora torquent per
                                conubia nostra, per inceptos himenaeos. In lacus mauris, conubia nostra, 
                                per inceptos himenaeos. In lacus mauris,
                                <span></span>
                            </div>
                        </li>                 
                    </ul>

                </div>
            </div><!-- /#testimonials .carousel. testimonials -->

            <script type="text/javascript">
                $(document).ready(function(){
                    $('#testimonials').elastislide({
                        imageW  : 670,
                        margin  : 30                    
                    });
                });
            </script>

        </div><!-- /.span5 -->

        <!-- .span7 -->
        <div class="span7">

            <h3 class="title">Latest Blog <small>Lorem ipsum dolor sit amet</small></h3>

            <!-- #testimonials .carousel. testimonials -->
            <div id="latets-blog" class="flex-carousel latest-blog">
                <div class="carousel-wrapper">

                    <ul> 
                        <li>
                            <img src="example/lb1.jpg" alt="Images">
                            <div class="wrapper">
                                <div class="blog-title">
                                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>
                                    <ol>
                                        <li>By admin</li>
                                        <li> On May 8 2012</li>
                                        <li> In Wordpress</li>
                                        <li> Comments</li>
                                    </ol>
                                    <span class="post-format-standart"></span>
                                </div>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                                sit amet sapien eros. Morbi nisi libero, lacinia eget egestas sed,
                                pretium a dui. Sed imperdiet nulla non metus ultricies in
                                elementum dolor consequat. Praesent molestie auctor.
                            </p>
                        </li>

                        <li>
                            <img src="example/lb2.jpg" alt="Images">
                            <div class="wrapper">
                                <div class="blog-title">
                                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>
                                    <ol>
                                        <li>By admin</li>
                                        <li> On May 8 2012</li>
                                        <li> In Wordpress</li>
                                        <li> Comments</li>
                                    </ol>
                                    <span class="post-format-video"></span>
                                </div>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                                sit amet sapien eros. Morbi nisi libero, lacinia eget egestas sed,
                                pretium a dui. Sed imperdiet nulla non metus ultricies in
                                elementum dolor consequat. Praesent molestie auctor.
                            </p>
                        </li>

                        <li>
                            <div class="wrapper">
                                <div class="blog-title">
                                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>
                                    <ol>
                                        <li>By admin</li>
                                        <li> On May 8 2012</li>
                                        <li> In Wordpress</li>
                                        <li> Comments</li>
                                    </ol>
                                    <span class="post-format-aside"></span>
                                </div>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                                sit amet sapien eros. Morbi nisi libero, lacinia eget egestas sed,
                                pretium a dui. Sed imperdiet nulla non metus ultricies in
                                elementum dolor consequat. Praesent molestie auctor.
                            </p>
                        </li> 

                        <li>
                            <div id="carousel" class="carousel slide">
                                <div class="carousel-inner">
                                    <div class="active item"><img src="example/lb1.jpg" alt="Images" /></div>
                                    <div class="item"><img src="example/lb2.jpg" alt="Images" /></div>
                                    <div class="item"><img src="example/lb3.jpg" alt="Images" /></div>
                                </div>

                                <a class="carousel-control left" href="#carousel" data-slide="prev">&lsaquo;</a>
                                <a class="carousel-control right" href="#carousel" data-slide="next">&rsaquo;</a>
                            </div>

                            <script type="text/javascript">
                                $(document).ready(function(){
                                   $('.carousel').carousel({
                                        interval: 4000
                                    })
                                });
                            </script>

                            <div class="wrapper">
                                <div class="blog-title">
                                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>
                                    <ol>
                                        <li>By admin</li>
                                        <li> On May 8 2012</li>
                                        <li> In Wordpress</li>
                                        <li> Comments</li>
                                    </ol>
                                    <span class="post-format-gallery"></span>
                                </div>
                            </div>
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
                                sit amet sapien eros. Morbi nisi libero, lacinia eget egestas sed,
                                pretium a dui. Sed imperdiet nulla non metus ultricies in
                                elementum dolor consequat. Praesent molestie auctor.
                            </p>
                        </li>   

                        <li>
                            <div class="wrapper">
                                <div class="blog-title">
                                    <h2><a href="./blog-single.html">Lorem ipsum dolor sit amet consectetur</a></h2>
                                    <ol>
                                        <li>By admin</li>
                                        <li> On May 8 2012</li>
                                        <li> In Wordpress</li>
                                        <li> Comments</li>
                                    </ol>
                                    <span class="post-format-quote"></span>
                                </div>
                            </div>
                            <blockquote>
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mollis nisi eros. Maecenas congue commodo auctor. Suspendisse et augue nulla, quis interdum mi...</p>
                            </blockquote>
                        </li>      

                    </ul>

                </div>
            </div><!-- /#testimonials .carousel. testimonials -->

            <script type="text/javascript">
                $(document).ready(function(){
                    $('#latets-blog').elastislide({
                        imageW  : 670,
                        margin  : 30                    
                    });
                });
            </script>

        </div><!-- /.span7 -->

    </section><!-- /.row -->


    <!-- #footer.container -->
    <footer id="footer" class="container">
        
        <!-- .row .clearfix -->
        <div class="row clearfix">

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">About Us</h3>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris. Donec vel felis metus, et laoreet enim. Donec congue nunc sit amet lacus lacinia pretium.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</p>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Latest Tweets</h3>

                <div class="tweet"></div> 

                <script type="text/javascript">
                    $(document).ready(function(){
                       //TWITTER
                        $(".tweet").tweet({
                              join_text: "auto",
                              username: "envato",
                              avatar_size: 0,
                              count: 2,
                              auto_join_text_default: "we said,",
                              auto_join_text_ed: "we",
                              auto_join_text_ing: "we were",
                              auto_join_text_reply: "we replied",
                              auto_join_text_url: "we were checking out",
                              loading_text: "loading tweets..."
                        });
                    });
                </script>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">

                <h3 class="title">Recent Post</h3>

                <ul>
                    <li class="first">
                        <span class="date">April 18, 2012</span>
                        <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>


                    <li>
                        <span class="date">April 18, 2012</span>
                        <a href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ligula mauris.</a>
                    </li>
                </ul>

            </div><!-- /.span3 -->

            <!-- .span3 -->
            <div class="span3">
                
                <h3 class="title">Follow Us</h3>

                <!-- .social -->
                <ul class="social">
                    <li class="twitter"><a href="#">twitter</a></li>
                    <li class="facebook"><a href="#">facebook</a></li>
                    <li class="dribbble"><a href="#">dribbble</a></li>
                    <li class="vimeo"><a href="#">vimeo</a></li>
                    <li class="flickr"><a href="#">flickr</a></li>
                    <li class="pinterest"><a href="#">pinterest</a></li>
                </ul><!-- /.social -->

            </div><!-- /.span3 -->

        </div><!-- /.row .clearfix -->

        <!-- #copyright.clearfix -->
        <div id="copyright" class="clearfix">

            <p>Copyright 2012. All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a></p>

            <!-- #footer-menu -->
            <nav id="footer-menu">
                <ul class="clearfix">
                    <li><a href="#" class="current" data-description="Home Page">Home</a>
                    </li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Portfolio</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Features</a></li>
                    <li><a href="#">Contact</a></li>
                </ul>
            </nav><!-- /#footer-menu -->

        </div><!-- /#copyright .clearfix -->

    </footer><!-- /#footer .container -->


</section><!-- /.container -->


</body>
</html>